<template>
  <button @click="saveChartDesignerData">保存</button>
  <div id="waterPoloMain" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import {onMounted} from 'vue';

import response_data from "./response_data.json"
let designer;
let rtn =[
  {
    "name": "商品区域销售",
    "id": "商品区域销售",
    "type": 4,
    "response_data":Array.from(response_data)
  }
]
let init_jidu="1";
//数据集
const getData=()=>{
  let _datasMap=[];

  rtn.forEach(item=>{
    let _response_rtn=[]
    item.response_data.forEach(records=>{
      records.forEach(record=>{
        if(record['季度'] === init_jidu){
            _response_rtn.push(...record)
        }
      })
    })
    _datasMap.push({
      "name":item.name,
      "id":item.id,
      "type":item.type,
      "response_data":_response_rtn,
    })
  })
  if(init_jidu === '1') {
    init_jidu="2"
  }else if(init_jidu === '2'){
    init_jidu="3"
  }else if(init_jidu === '3'){
    init_jidu="4"
  }else if(init_jidu === '4'){
    init_jidu="1";
  }
}

let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1920px',
    height: '1080px'
  },
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"  //  新建一个新的报表实例，如果希望可以预先动态从后台提供几个数据集供其使用，这个配置必须有；
      // 然后只要动态的从后台拿到n个数据集，全部用 results格式装配，onUpdateDatasetList方法来触发
    }
  ]

}

let __onUpdateDatasetList = [
  {
    "name": "商品区域销售",
    "id": "商品区域销售",
    "fields": [
      {
        "name": "商品",
        "data_type": 3
      },
      {
        "name": "区域名称",
        "data_type": 3
      },
      {
        "name": "销售额",
        "data_type": 2
      }
      ,
      {
        "name": "年份",
        "data_type": 3
      },
      {
        "name": "季度",
        "data_type": 3
      },
      {
        "name": "目标完成比",
        "data_type": 2
      }
    ],
    "params": [
      {
        "name": "商品",
        "data_type": 3
      },
      {
        "name": "区域名称",
        "data_type": 3
      }
    ]
  }
];
//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
const onUpdateDatasetList=()=> {
  console.log("...waterPoloMain.vue....onUpdateDatasetList  is called")

  return new Promise((resolve, reject) => {

    resolve(__onUpdateDatasetList)

  })
}

option.onUpdateDatasetList = onUpdateDatasetList

//正常应该是和报表设计器一样，这里的x个表结构，对于报表设计器/bi设计器来说，是外部数据源的待选数据集列表


function onUpdateData(datasets, params) {
  console.log("...waterPoloMain.vue....onUpdateData is called,",datasets,params);
  return new Promise((resolve, reject) => {

    resolve([])

  })
}


option.onUpdateData = onUpdateData



onMounted(async() => {
  onMounted(() => {

    try {

      designer = new XZChartDesigner("#waterPoloMain", option);
    } catch (e) {
      console.log(".....onMounted throw error:", e);
    }
  })
})

let chartDesignerReportData;

function saveChartDesignerData(chartDesignerPreviewId) {

  let config = designer.getSaveData().config;
  let dataConfig = designer.getSaveData().data.dataConfig;//json数据集和记录，外部数据集和null记录

  usePreStore.saveChartDesignerPreviewData(chartDesignerPreviewId, config, dataConfig);


  console.log("designer.getSaveData()即chartDesigner_template:", designer.getSaveData())
  console.log("designer.getSaveData().config:", config)
  console.log("designer.getSaveData().data.dataConfig:", dataConfig);
  console.log(" usePreStore.xzChartDesigners.get(chartDesignerPreviewId):", usePreStore.xzChartDesigners.get(chartDesignerPreviewId));
}

</script>

<style scoped>

</style>
